<template>
  <!-- 空间分析页面 -->
  <div id="space-analyze-page">
    <h2>
      空间图库分析 -
      <span v-if="queryAll">全部空间</span>
      <span v-else-if="queryPublic">公共空间</span>
      <span v-else>
        <a :href="`/space/${spaceId}`" target="_blank">id:{{ spaceId }}</a>
      </span>
    </h2>
    <a-row :gutter="[16, 16]">
      <!--  空间使用分析    -->
      <a-col :xs="24" :md="12">
        <space-usage-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
      <!--  空间分类分析    -->
      <a-col :xs="24" :md="12">
        <space-category-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
      <!--  标签分析    -->
      <a-col :xs="24" :md="12">
        <space-tag-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
      <!--  图片大小分端分析    -->
      <a-col :xs="24" :md="12">
        <space-size-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
      <!--  用户上传行为分析    -->
      <a-col :xs="24" :md="12">
        <space-user-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
      <!--  空间使用排行分析    -->
      <a-col v-if="isAdmin" :xs="24" :md="12">
        <space-rank-analyze
          :query-all="queryAll"
          :query-public="queryPublic"
          :space-id="spaceId"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import SpaceUsageAnalyze from '@/components/analyze/SpaceUsageAnalyze.vue'
import SpaceCategoryAnalyze from '@/components/analyze/SpaceCategoryAnalyze.vue'
import SpaceTagAnalyze from '@/components/analyze/SpaceTagAnalyze.vue'
import SpaceSizeAnalyze from '@/components/analyze/SpaceSizeAnalyze.vue'
import SpaceUserAnalyze from '@/components/analyze/SpaceUserAnalyze.vue'
import SpaceRankAnalyze from '@/components/analyze/SpaceRankAnalyze.vue'
import { useLoginUserStore } from '@/stores/useUserLoginStore.ts'

const route = useRoute()
// 空间id
const spaceId = computed(() => route.query?.spaceId as string)
// 是否查询所有空间
const queryAll = computed(() => !!route.query?.queryAll)
// 是否查询公共图库
const queryPublic = computed(() => !!route.query?.queryPublic)

const loginUserStore = useLoginUserStore()
// 是否是管理员
const isAdmin= computed(() => {
  return loginUserStore.userRole === 'admin'
})

</script>

<style lang="less" scoped></style>
